<script setup lang='ts'>
// 自定义 规则
//interface Props {
//}
type ThoroughfareType = 'normal' | 'not_active' | 'close' | 'deactivate'
import { onMounted, ref, reactive, defineProps } from 'vue';
//const { } = defineProps<Props>();
import Navbar from '@/components/Navbar/index.vue'
import Tabbar from '@/components/Tabbar/index.vue'
import Box from '@/components/Box/index.vue'
import { thoroughfare, equipmentStatus } from '@/public/data'
import { https } from '@/api/api';
import { navigateTo, showToast } from '@/public';
import DetailCard from '@/components/DetailsCard/index.vue'
import DefPopBox from '@/components/defaultPopupBox/index.vue'
import { useOrderStore } from '@/store'
/**
 * @property 变量
 */
const orderStore = useOrderStore();
const optEmpty = {
    tip: '暂无订单记录',
    icon: '/static/order/empty.png'
};
// 套餐列表
const packageList = ref([{
    thoroughfareType: 'normal',
    orderType: '',
    typeText: '代发货',
    time: '',
    number: '',
}])
// 要展示的套餐操作
const setMenuType = ref('normal')
// 操作列表
const operateList = ref([{
    name: '切换通道',
    url: '/subPackages/orderPage/switchChannels',
    showType: ['normal']
}, {
    name: '我要退租',
    url: '/subPackages/userPage/deposit/instructions',
    showType: ['close']
}, {
    name: '购买新套餐',
    url: '/subPackages/package/list',
    showType: ['close',]
}, {
    name: '联系客服',
    url: '/subPackages/userPage/onlineService',
    showType: ['deactivate']
}])
//swiper下标
const seriperIndex = ref(0);
// 确认收货弹窗
const confirmReceiptShwo = ref(false);
// 设备类型
const type = ref('3')
/**
 * @property  所有请求以api开头 如:apiDataInfo
 */
// 获取用户 套餐列表
const apiDeviceList = async () => {
    const res = await https({
        mode: 'order',
        name: 'apiDeviceIndex'
    })
    if (res.code !== 0) return showToast(res.msg);
    packageList.value = res.data.data;
    setMenuType.value = packageList.value?.[0]?.thoroughfareType || 'null'
}
//  获取用户 订单记录
const apiOrderRecord = async () => {
    const res = await https({
        mode: 'order',
        name: 'apiOrderRecord'
    })
    if (res.code !== 0) return showToast(res.msg);
}

/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */

// swiper改变
const changeSwiperIndex = (e: { detail: { current: number } }) => {
    // console.log(e.detail.current)
    const index = e.detail.current;
    setMenuType.value = packageList.value?.[index]?.thoroughfareType || 'null'

}
// 点击设备but按钮
const clickBut = (value: string) => {
    if (value === 'pop') {
        // 确认收货
        confirmReceiptShwo.value = true
    }
    else navigateTo(equipmentStatus.get(type.value)?.url || '')
}
/**
 * @property 内置方法
 */


</script>
<template>
    <div class="w-[100vw] h-[100vh] p-3.5">
        <!-- <Navbar color="#000" bg-color="#fff" title="我的订单" /> -->
        <div class="h-336 b-rd-2 fc mb-8 w-[100%]"
            style=" background-image: url(/static/bg/orderCard.png);background-size: 100% 100%; background-repeat: no-repeat;">
            <swiper class="w-[100%] h-[100%]" @change="changeSwiperIndex" :current="seriperIndex">
                <swiper-item class="w-[100%] h-[100%]" v-for="(item, i) in packageList" :key="i">
                    <div class="w-[100%] h-[100%] p-3.5">
                        <div class="w-186 h-48 b-rd-1 bg-[#002416] fra fc">
                            <div class="size-12"
                                :style="{ backgroundImage: `url(${thoroughfare.get(item.thoroughfareType)?.img})`, backgroundSize: '100% 100%' }">
                            </div>
                            <text class="font-size-24 ml-2"
                                :style="{ color: thoroughfare.get(item.thoroughfareType)?.color }">通道1:正常</text>
                        </div>
                        <div class="w-[100%] fra frb mt-3.5">
                            <text class="font-size-48 fw500 c-[#fff]">{{ equipmentStatus.get(type)?.name }}</text>
                            <div class="fc w-151 h-48 b-rd-1 c-[#fff] fc font-size-24" style="border: 1rpx solid #fff"
                                @click="clickBut(equipmentStatus.get(type)?.url || '')">
                                {{ equipmentStatus.get(type)?.butName }} >
                            </div>
                        </div>
                        <div class="frb c-[#fff] font-size-24 mt-9.5">
                            <div class="flex flex-col flex-1">
                                <text>到期时间</text>
                                <text>2024/08/22</text>
                            </div>
                            <div class="flex flex-col flex-1">
                                <text>设备编号</text>
                                <text>SSID220122195807111148</text>
                            </div>
                        </div>
                    </div>
                </swiper-item>
                <swiper-item class="w-[100%] h-[100%] fc">
                    <div class="w-240 h-72 b-rd-9 but fc font-size-28 def-c p-2 frb"
                        @click="navigateTo('/subPackages/package/list')">
                        购买新套餐
                        <div class="size-48 b-rd-[50%] def-bg fc">
                            <up-icon name="plus" size="30rpx" color="#fff"></up-icon>
                        </div>
                    </div>
                </swiper-item>
            </swiper>
        </div>
        <div class="bg-[#fff] b-rd-2 pl-3.5 pr-3.5">
            <!--  -->
            <div class="flex frb pt-3.5 pb-3.5"
                v-for="(item, i) in operateList.filter(item => item.showType.includes(setMenuType))" :key="i"
                style="border-bottom: 1rpx solid #E7E7E7;" @click="navigateTo(item.url)">
                <text class="font-size-28">{{ item.name }}</text>
                <up-icon name="arrow-right" color="#A7A7A7" size="28rpx"></up-icon>
            </div>
        </div>
        <div class="mt-3.5">
            <Box title="订单记录">
                <template #titleRight>
                    <text class="font-size-24 c-[#A7A7A7] text-nowrap"
                        @click="navigateTo('/subPackages/orderPage/orderRecord')">更多记录 > </text>
                </template>
                <div class="bg-[#E7E7E7] h-1 mt-3.5"></div>
                <mescroll-empty :option="optEmpty" />
                <DetailCard pic-color="#1C1C1C" @click="navigateTo('/subPackages/orderPage/orderDetail')" v-if="false">
                    <template #titleRight>
                        <text class="font-size-24">完成</text>
                    </template>
                    <template #bot>
                        <div class="flex frb font-size-24 mt-3.5">
                            <text class="c-[#777777]">设备下单：</text>
                            <text class="c-[#1C1C1C]">实付：¥476</text>
                        </div>
                    </template>
                </DetailCard>
            </Box>
        </div>
        <div class="h-120"></div>
    </div>
    <Tabbar type="order" />
    <!-- clickConfirmAccept -->
    <DefPopBox :show="confirmReceiptShwo" confirm-text="确认收货" @close="confirmReceiptShwo = false"
        @confirm="orderStore.apiDeviceReceive">
        <template #center>
            <div class="fc h-200">
                <text class="font-size-48 fw500 text-center"> 您确认已收到租赁的WIFI设备，且检查后设备无异常</text>
            </div>

        </template>
    </DefPopBox>

</template>
<style lang="scss" scoped>
.but {
    background: linear-gradient(to top, #A8FFDF 0%, #FFFFFF 100%);
}
</style>